<template>
	<view :style="themeColor">
		<view class="page">
			<view class="flex flex-direction flex-wrap align-stretch benben-position-layout flex quoteNow_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between quoteNow_fd0_0'>
					<view class='flex flex-wrap align-center quoteNow_fd0_0_c0' @tap.stop="handleJumpDiy"
						data-type="back" data-url="1">
						<text class='fu-iconfont2  quoteNow_fd0_0_c0_c0'>&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-center'>
						<text class='quoteNow_fd0_0_c1_c0' v-if="typess == '1'">加价</text>
						<text class='quoteNow_fd0_0_c1_c0' v-else>我的报价</text>
					</view>
					<view class='flex align-center justify-end quoteNow_fd0_0_c0'>
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!---flex布局flex布局开始-->
			<view class="quoteNow_fd1_0_c0006" v-if="service_type == '2' && typess != '1'">
				<text class='quoteNow_fd1_0_c00081'>*注：本次报价加上用户已付定金金额为订单总金额</text>
			</view>
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout quoteNow_flex_1">
				<view class='flex flex-wrap align-center quoteNow_fd1_0'>
					<text class='quoteNow_fd1_0_c0'>请填写备注</text>
					<!-- <text class='quoteNow_fd1_0_c1'>(请确认已与用户联系并沟通好价格)</text> -->
				</view>
				<view class='flex flex-wrap quoteNow_fd1_1'>
					<textarea class='flex quoteNow_input_fd1_1' :placeholder="'请您输入需要备注内容'" :maxlength="999"
						placeholder-style="color:#999;font-size:28rpx" v-model="descr" />

				</view>
				<benben-images-upload ref="benbenImagesUploadfd1_2" :img-list.sync="service_photo_list"
					:img-ids.sync="service_photo" :maxlength="9" v-if=" imageType!='1'">
					<template #content="{ num, maxlength, isShow, imgList }">
						<view class="flex flex-wrap align-start flex quoteNow_fd1_2">

							<view v-for="(image, index) in imgList" :key="index"
								class='flex position-relative quoteNow_fd1_20'>
								<text class='fu-iconfont2 position-absolute quoteNow_fd1_200'
									@tap.stop="$refs.benbenImagesUploadfd1_2.delImage(index)">&#xE8E7;</text>
								<image class='quoteNow_fd1_201'
									@tap.stop="$refs.benbenImagesUploadfd1_2.previewImage(index)" mode="aspectFill"
									:src='image'></image>
							</view>
							<image class='quoteNow_fd1_21' @tap.stop="$refs.benbenImagesUploadfd1_2.manyChooseImage()"
								v-if="isShow" mode="aspectFit" :src='STATIC_URL+"25.png"'></image>

						</view>
					</template>
				</benben-images-upload>
			</view>

			<!---flex布局flex布局结束-->
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout quoteNow_flex_2">
				<view class='flex flex-wrap align-center quoteNow_fd2_0'>
					<text class='quoteNow_fd2_0_c0' v-if="typess == '1'">请输入加价（元）</text>
					<text class='quoteNow_fd2_0_c0' v-else>请输入报价（元）</text>
					<benben-input class='flex-sub quoteNow_fd2_0_c1' type="digit" :placeholder="`请输入`"
						confirm-type="done" :maxlength="8"
						placeholder-style="color:rgba(191, 191, 191, 1);font-size:32rpx"
						@input="handleInputFunc($event)" v-model="zhifujine" />
				</view>
			</view>

			<!---flex布局flex布局结束-->
			<view class="flex flex-wrap align-center benben-position-layout flex quoteNow_flex_3">
				<view class='flex flex-wrap align-center quoteNow_fd3_0'>
					<text class='quoteNow_fd3_0_c0' v-if="typess == '1'">加价：</text>
					<text class='quoteNow_fd3_0_c0' v-else>报价：</text>
					<view class='flex flex-wrap align-end'>
						<text class='quoteNow_fd3_0_c1_c0'>￥</text>
						<text class='quoteNow_fd3_0_c1_c1'>{{zhifujine}}</text>
						<text class='quoteNow_fd3_0_c1_c1' v-if=" zhifujine==0">0</text>
					</view>
				</view>
				<button class='quoteNow_fd3_1' @tap.stop="postQuotationFunc()" v-if="typess == '1'">确认加价</button>
				<button class='quoteNow_fd3_1' @tap.stop="postQuotationFunc()" v-else>确认报价</button>

			</view>
			<view :style="{height: '90rpx'}"></view>


		</view>
	</view>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'

	export default {
		components: {},


		data() {
			return {
				"zhifujine": "",
				"service_photo": "",
				"service_photo_list": [],
				"descr": "",
				"sn": null,
				"service_type": "",
				"order_status": "",
				"typess": "",
				"imageType": "",
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},
			/**
			 * @returns 
			 * Android       安卓
			 * IOS       苹果
			 * Web       H5 或 pc
			 * Wechat       微信小程序
			 * Alipay       支付宝小程序
			 * Baidu       百度小程序
			 * ByteBounce       抖音小程序
			 * 360       360小程序
			 * FastApp       快应用
			 */
			appSystemIdentification() {
				return this.$store.state.appSystemIdentification
			}
		},
		watch: {},
		onLoad(options) {
			let {
				sn,
				service_type,
				order_status,
				typess,
				imageType
			} = options
			if (sn !== undefined) this.sn = sn
			if (service_type !== undefined) this.service_type = service_type
			if (order_status !== undefined) this.order_status = order_status
			if (typess !== undefined) this.typess = typess
			if (imageType !== undefined) this.imageType = imageType
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			//提交我的报价
			async postQuotationFunc() {
				// if (this.service_photo_list.length < 1) {
				// 	this.$message.info('请上传服务图片');
				// 	return false;
				// }
				if (!validate(this.descr, 'require')) {
					this.$message.info('备注内容不能为空');
					return false;
				}
				if (!validate(this.zhifujine, 'require')) {
					this.$message.info('请输入报价金额');
					return false;
				}
				if (this.zhifujine <= 0) {
					this.$message.info("请输入正确金额");
					return
				}
				if (this.service_type != '3') {
					//请求方法
					//数据验证

					let data639457e18a732 = await this.$api.dbPost(global.apiUrls.post639457e18a732, {
						aid: this.sn,
						zhifujine: this.zhifujine,
						descr: this.descr,
						image: this.service_photo
					});
					if (!data639457e18a732) return
					if (data639457e18a732.data.code != 1) {
						this.$message.info(data639457e18a732.data.msg);
						return
					}
					if (this.typess == 1) {
						this.$message.info('加价成功');
						setTimeout(() => {
							this.$urouter.navigateBack(1);
						}, 500)
					} else {
						this.$message.info('报价成功');
						setTimeout(() => {
							this.$urouter.navigateBack(1);
						}, 500)
					}

				} else if (this.service_type == '3') {
					if (this.order_status == '5') {
						//请求方法
						//数据验证

						let data64df1ced19709 = await this.$api.dbPost(global.apiUrls.post64df1ced19709, {
							order_id: this.sn,
							bidding_price: this.zhifujine,
							remark: this.descr,
							image: this.service_photo
						});
						if (!data64df1ced19709) return
						if (data64df1ced19709.data.code != 1) {
							this.$message.info(data64df1ced19709.data.msg);
							return
						}
						this.$message.info('竞价成功');
						setTimeout(() => {
							this.$urouter.navigateBack(1);
						}, 500)
					} else if (this.order_status == '30') {
						//请求方法
						//数据验证

						let data639457e18a732 = await this.$api.dbPost(global.apiUrls.post639457e18a732, {
							aid: this.sn,
							zhifujine: this.zhifujine,
							descr: this.descr,
							image: this.service_photo
						});
						if (!data639457e18a732) return
						if (data639457e18a732.data.code != 1) {
							this.$message.info(data639457e18a732.data.msg);
							return
						}
						this.$message.info('加价成功');
						setTimeout(() => {
							this.$urouter.navigateBack(1);
						}, 500)
					}
				}
			},
			//限制两位小数
			handleInputFunc(e) {
				let price = e.match(/^\d*(\.?\d{0,2})/g)[0];
				let that = this;
				if (e) {
					if (this.zhifujine <= 0) {
						this.$message.info("请输入正确金额");
						return
					}
					if (this.zhifujine != price) {
						this.$nextTick(() => {
							this.zhifujine = price
						})
						this.$message.info("小数点后保留两位");
						return
					}
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: rgba(246, 247, 249, 1);
		background-size: 100% auto;
	}

	.quoteNow_flex_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.quoteNow_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
	}

	.quoteNow_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
		font-weight: 500;
	}

	.quoteNow_fd0_0_c0 {
		width: 100rpx;
	}

	.quoteNow_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 88rpx;
	}

	.quoteNow_flex_1 {
		background: #fff;
		background-size: 100% auto !important;
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.quoteNow_fd1_21 {
		width: 160rpx;
		height: 160rpx;
		margin: 0rpx 24rpx 24rpx 0rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.quoteNow_fd1_201 {
		width: 160rpx;
		height: 160rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.quoteNow_fd1_200 {
		top: 0rpx;
		right: 0rpx;
		z-index: 10;
		color: #ff5536;
	}

	.quoteNow_fd1_20 {
		margin: 0rpx 24rpx 24rpx 0rpx;
	}

	.quoteNow_fd1_2 {
		// margin: 32rpx 0rpx 0rpx 0rpx;
	}

	.quoteNow_input_fd1_1 {
		width: 100%;
		height: 200rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333;
		white-space: pre-wrap;
	}

	.quoteNow_fd1_1 {
		background: rgba(246, 246, 246, 1);
		padding: 24rpx 24rpx 24rpx 24rpx;
		background-size: 100% auto;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
	}

	.quoteNow_fd1_0_c1 {
		color: #999999;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 33rpx;
	}

	.quoteNow_fd1_0_c0 {
		color: #333333;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 45rpx;
		margin: 0rpx 16rpx 0rpx 0rpx;
	}

	.quoteNow_fd1_0_c00081 {
		color: red;
		font-size: 26rpx;
		font-weight: 400;
		line-height: 45rpx;
		margin: 0rpx 16rpx 0rpx 0rpx;
	}

	.quoteNow_fd1_0_c0006 {
		background: #fff;
		padding: 32rpx 32rpx 0rpx 32rpx;
	}

	.quoteNow_fd1_0 {
		margin: 32rpx 0rpx 32rpx 0rpx;
	}

	.quoteNow_flex_2 {
		background: #fff;
		background-size: 100% auto !important;
		padding: 0rpx 32rpx 0rpx 32rpx;
		margin: 20rpx 0rpx 0rpx 0rpx;
	}

	.quoteNow_fd2_0_c1 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333;
		text-align: right;
		margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.quoteNow_fd2_0_c0 {
		color: #333333;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 45rpx;
	}

	.quoteNow_fd2_0 {
		height: 110rpx;
	}

	.quoteNow_flex_3 {
		background: #fff;
		width: 750rpx;
		height: 90rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
		background-size: 100% auto !important;
	}

	.quoteNow_fd3_1 {
		background: rgba(48, 144, 255, 1);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		font-size: 32rpx;
		color: #fff;
		width: 280rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-weight: 400;
		margin: 0rpx 0rpx 0rpx auto;
	}

	.quoteNow_fd3_0_c1_c1 {
		color: rgba(227, 29, 26, 1);
		font-size: 40rpx;
		font-weight: 700;
		line-height: 45rpx;
	}

	.quoteNow_fd3_0_c1_c0 {
		color: rgba(227, 29, 26, 1);
		font-size: 22rpx;
		font-weight: 700;
		line-height: 40rpx;
	}

	.quoteNow_fd3_0_c0 {
		color: #333333;
		font-size: 28rpx;
	}

	.quoteNow_fd3_0 {
		margin: 0rpx 0rpx 0rpx 32rpx;
	}
</style>